<template>
    <div class="clubsListBox">
        <!-- 搜索表单 -->
        <div>
            <el-form :model="queryData" ref="queryForm" size="small" :inline="true">
                <el-form-item label="社团名称">
                    <el-input v-model="queryData.name" placeholder="请输入社团名称" clearable style="width: 240px"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="社团地点">
                    <el-input v-model="queryData.place" placeholder="请输入社团地点" clearable style="width: 240px"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 社团列表 -->
        <div v-if="formData.length">
            <div v-for="(item, index) in formData" :key="index" class="activite-box"
                :class="{ 'last-activite-box': index === formData.length - 1 }">
                <div class="activite-subject">
                    <div style="position: relative; display: flex; align-items: center;">
                        <img class="club-logo" :src="item.logo" />
                        <div style="margin-left: 15px;">
                            <div style="font-size: 1.2rem; font-weight: 600;">{{ item.name }}</div>
                            <div class="club-info">
                                <span class="club-tag location">{{ item.place }}</span>
                                <!-- <span class="club-tag member-count">成员 {{ item.memberCount || 0 }}人</span> -->
                            </div>
                        </div>
                    </div>
                    <el-button type="primary" round class="activite-button" @click="goClubs(item)">查看详情</el-button>
                </div>
                <div class="flex fsz26">
                    <p class="label">社团简介：</p>
                    <p class="content">{{ item.description || '暂无简介' }}</p>
                </div>
                <!-- <div class="flex fsz26">
                    <p class="label">特色活动：</p>
                    <p class="content">{{ item.featuredActivities || '暂无特色活动' }}</p>
                </div> -->
            </div>

            <!-- 分页 -->
            <pagination class="pagination" v-show="total > 0" :total="total" :page.sync="queryData.pageNum"
                :limit.sync="queryData.pageSize" @pagination="getList" />
        </div>
        <div class="no-data" v-else>暂无社团</div>
    </div>
</template>

<script>
import Pagination from "@/components/Pagination/index.vue"
import { select } from "@/api/organizations/index.js"

export default {
    data() {
        return {
            total: 0,
            queryData: {
                name: "",
                place: "",
                description: "",
                pageNum: 1,
                pageSize: 10
            },
            rowData: [
                {
                    prop: "name",
                    label: "社团名称",
                    width: "200"
                },
                {
                    prop: "logo",
                    label: "logo",
                    width: "200"
                },

                {
                    prop: "place",
                    label: "社团地点",
                    width: "200"
                },
                {
                    prop: "description",
                    label: "社团简介",
                    // width: "200"
                },
            ],
            formData: [],
        }
    },
    components: {
        Pagination
    },
    created() {
        this.select()
    },
    methods: {
        select() {
            return new Promise((resolve) => {
                select(this.queryData).then(res => {
                    const { JoinClubsByPage } = res.data
                    this.total = JoinClubsByPage.total

                    this.formData = JoinClubsByPage.records
                    resolve()
                })
            })
        },
        getList(e) {
            this.queryData.pageNum = e.page
            this.queryData.pageSize = e.limit
            this.select()
        },
        handleQuery() {
            this.queryData.pageNum = 1
            this.select()
        },
        goClubs(e) {
            this.$router.push(`/clubsDetails?id=${e.id}`)
        }
    }
}
</script>

<style scoped>
/* 保持与活动列表完全相同的样式基础 */
.clubsListBox {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 搜索表单 */
::v-deep .el-form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

::v-deep .el-form-item {
    margin-bottom: 18px;
    margin-right: 30px;
}

::v-deep .el-form-item__label {
    font-weight: 500;
    color: #606266;
}

::v-deep .el-input__inner {
    border-radius: 20px;
    transition: all 0.3s;
}

::v-deep .el-button--primary {
    background: linear-gradient(135deg, #409EFF, #3375b9);
    border: none;
    border-radius: 20px;
    padding: 9px 20px;
    transition: all 0.3s;
}

/* 社团卡片 */
.activite-box {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    border: 1px solid #ebeef5;
}

.activite-box:hover {
    transform: translateY(-3px);
}

.activite-subject {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

/* 社团Logo */
.club-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    object-fit: cover;
}

/* 社团信息 */
.club-info {
    margin-top: 8px;
}

.club-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    margin-right: 10px;
}

.location {
    background: #409EFF;
    color: #ffffff;
}

.member-count {
    background: #67c23a;
    color: #ffffff;
}

/* 内容样式 */
.fsz26 {
    font-size: 0.95rem;
    color: #606266;
    line-height: 1.6;
    margin: 8px 0;
}

.label {
    color: #909399;
    min-width: 80px;
    font-weight: 500;
}

.content {
    flex: 1;
    color: #606266;
}

.flex {
    display: flex;
    align-items: baseline;
    margin: 12px 0;
    gap: 15px;
}

/* 按钮样式 */
.activite-button {
    background: linear-gradient(135deg, #409EFF, #3375b9);
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(64,158,255,0.3);
}

.activite-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64,158,255,0.4);
}

/* 分页 */
.pagination {
    margin-top: 30px;
    text-align: center;
}

/* 无数据提示 */
.no-data {
    font-size: 1.1rem;
    text-align: center;
    color: #909399;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

/* 响应式 */
@media (max-width: 768px) {
    .activite-subject {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .club-logo {
        width: 50px;
        height: 50px;
    }
    
    .activite-button {
        width: 100%;
        text-align: center;
    }
    
    .flex {
        flex-direction: column;
        gap: 5px;
    }
    
    .label {
        margin-bottom: 5px;
    }
}
</style>